<template>
  <div>
    <transition name="fade">
      <div class="login-container" v-if="mode==='signin'">
        <div class="title">Sign In</div>
        <hr>
        <div class="form">
          <p>Telephone</p>
          <el-input
            placeholder=""
            v-model="user.username"
            clearable
          >
          </el-input>
          <p>Password</p>
          <el-input
            type="password"
            placeholder=""
            v-model="user.password"
            clearable>
          </el-input>
        </div>
        <div class="button-cover">
          <div class="button" @click="login">
            <div class="go">
              <div>G</div>
              <div>O</div>
            </div>
          </div>
          <div class="shade"></div>
        </div>
        <div class="button-cover2">
          <div class="button" @click="$store.commit('setLoginMode','signup')">
            <div class="sign">
              <div>S</div>
              <div>I</div>
              <div>G</div>
              <div>N</div>
              <div>U</div>
              <div>P</div>
            </div>
          </div>
          <div class="shade"></div>
        </div>
      </div>
    </transition>
    <transition name="fade">
      <div class="login-container" v-if="mode==='signup'">
        <div class="title">Sign Up</div>
        <hr>
        <el-row class="form2">
          <el-col :span="11">
            <p>Your name</p>
            <el-input
              placeholder=""
              v-model="userInfo.username"
              clearable
            >
            </el-input>
            <p>Password</p>
            <el-input
              type="password"
              placeholder=""
              v-model="userInfo.password"
              clearable>
            </el-input>
            <p>Repeat Password</p>
            <el-input
              type="password"
              v-model="userInfo.repeat"
              clearable
            ></el-input>
          </el-col>
          <el-col :span="11" :offset="2">
            <p>Telephone</p>
            <el-input
              placeholder=""
              v-model="userInfo.telephone"
              clearable
            >
            </el-input>
            <p>Address</p>
            <div>

              <el-select v-model="add1" placeholder="请选择">
                <el-option
                  v-for="(item,i) in Addr1"
                  :key="i"
                  :label="item"
                  :value="i">
                </el-option>
              </el-select>
              <el-select v-model="userInfo.add2" placeholder="请选择">
                <el-option
                  v-for="(item,i) in Addr2"
                  :key="i"
                  :label="item.name"
                  :value="i">
                </el-option>
              </el-select>
              <el-select v-if="!userInfo.add2&&userInfo.add2!==0" placeholder="请选择">
              </el-select>
              <el-select v-else v-model="userInfo.add3" placeholder="请选择">
                <el-option
                  v-for="(item,i) in Addr2[userInfo.add2].list"
                  :key="i"
                  :label="item"
                  :value="i">
                </el-option>
              </el-select>
              <el-input
                v-model="userInfo.add4"
              >
              </el-input>
            </div>
          </el-col>
        </el-row>
        <div class="button-cover">
          <div class="button" @click="regist">
            <div class="go">
              <div>G</div>
              <div>O</div>
            </div>
          </div>
          <div class="shade"></div>
        </div>
        <div class="button-cover2">
          <div class="button" @click="$store.commit('setLoginMode','signin')">
            <div class="sign">
              <div>S</div>
              <div>I</div>
              <div>G</div>
              <div>N</div>
              <div>I</div>
              <div>N</div>
            </div>
          </div>
          <div class="shade"></div>
        </div>
      </div>
    </transition>

  </div>
</template>

<script>
  export default {
    name: "GDHeaderLogin",
    data() {
      return {
        user: {username: '', password: ''},
        userInfo: {username: '', password: '', repeat: '', telephone: '', add1: 0, add2: 0, add3: '', add4: ''},
        add1: 0,
        Addr1: [],
        Addr2: []
      }
    },
    methods: {
      regist() {
        this.$emit('regist', this.userInfo);
        this.userInfo = {username: '', password: '', repeat: '', telephone: '', add1: 0, add2: 0, add3: '', add4: ''};
        this.user = {username: '', password: ''}
      },
      login() {
        this.$emit('login', this.user);
        this.userInfo = {username: '', password: '', repeat: '', telephone: '', add1: 0, add2: 0, add3: '', add4: ''};
        this.user = {username: '', password: ''};
      }
    },
    computed: {
      mode() {
        return this.$store.state.loginmode;
      }
    },
    created() {
      this.Addr1 = this.api.address1;
      this.Addr2 = this.api.address2;
    },
  }
</script>

<style scoped>
  .login-container {
    position: absolute;
    left: 50%;
    top: 20px;
    width: 60%;
    transform: translateX(-50%);
    color: white;
    text-shadow: 0 0 4px #f5d8ee;
    text-align: center;
  }

  .title {
    font-size: 24px;
    font-weight: 800;

  }

  .split {
    height: 350px;
    width: 1px;
    background: #363947;
    box-shadow: 0 0 2px #2d364b;
    position: absolute;
    left: 50%;
    top: 50px;
  }

  hr {
    /*background: #fff;*/
    box-shadow: 0 0 1px #2b2e36;
    margin-bottom: 40px;
  }

  .form {
    width: 300px;
    margin-left: 50%;
    transform: translateX(-50%);
  }

  .form2 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 40px;
    width: 600px;
  }

  .form2 p {
    font-size: 20px;
    font-weight: 100;
    margin: 5px;
  }

  .form p {
    font-size: 20px;
    font-weight: 100;
    margin: 10px;
  }

  .button-cover {
    position: absolute;
    left: calc(50% - 100px);
    height: 90px;
    width: 98px;
    top: 380px;
    overflow: hidden;

  }

  .button-cover2 {
    position: absolute;
    left: calc(50% + 8px);
    height: 100px;
    width: 90px;
    top: 375px;
    overflow: hidden;
    transform: rotate(90deg);
  }

  .button {
    position: absolute;
    width: 196px;
    height: 200px;
    border-radius: 50%;
    background: #29313e;
    border: 2px solid #fff;
    cursor: pointer;
  }

  .button:hover {
    background: rgba(89, 107, 135, 0.53);
  }

  .shade {
    position: absolute;
    background: #1c2533;
    width: 110px;
    height: 120px;
    border: 5px solid #fff;
    left: 40px;
    top: 40px;
    border-radius: 50%;
  }

  .go div {
    position: absolute;
    font-size: 22px;
  }

  .go div:nth-child(1) {
    left: 30px;
    top: 30px;
    transform: rotate(-45deg);
  }

  .go div:nth-child(2) {
    left: 45px;
    top: 15px;
    transform: rotate(-38deg);
  }

  .sign div {
    position: absolute;
    font-size: 22px;
  }

  .sign div:nth-child(1) {
    left: 20px;
    top: 50px;
    transform: rotate(-70deg);
  }

  .sign div:nth-child(2) {
    left: 28px;
    top: 40px;
    transform: rotate(-56deg);
  }

  .sign div:nth-child(3) {
    left: 28px;
    top: 32px;
    transform: rotate(-50deg);
  }

  .sign div:nth-child(4) {
    left: 38px;
    top: 20px;
    transform: rotate(-42deg);
  }

  .sign div:nth-child(5) {
    left: 55px;
    top: 10px;
    transform: rotate(-28deg);
  }

  .sign div:nth-child(6) {
    left: 66px;
    top: 5px;
    transform: rotate(-20deg);
  }
</style>
